<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <title>兑奖咯</title>
    <link rel="stylesheet" href="/static/css/common.css" type="text/css"/>
</head>

<style>
    body {
        background: none;
        background-color: #ad0000;
        overflow-y: scroll;
    }

    .img {
        width: 4em;
        height: 4em;
        border-radius: 0.8em;
    }

    .product-item {
        padding: 1em;
        width: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: dashed 0.5px white;
    }

    .product-content p{
        margin: 0.2em;
        text-align: left;
        font-size: 0.8em;
        color: white;
    }

    .product-name {
        font-size: 0.8em;
    }

    .product-price {
        font-size: 0.6em;
    }

    .exchange {
        text-decoration: none;
    }

    .exchanged {
        text-decoration: none;
        background-color: #c03400;
    }

    .qrcode-box {
        width: 200px;
        height: 200px;
        padding: 10px;
        margin: auto;
    }
</style>
<body>
{if condition="!$exchanges"}
<div style="width: 100vw;text-align: center;padding: 1em">
    <p style="color: white;margin: auto">暂无记录</p>
</div>
{/if}
{volist name="exchanges" id="exchange"}
<div class="product-item">
    <img src="{$exchange.img_url?$exchange.img_url:''}" class="img"/>
    <span class="product-content">
        <p class="product-name">产品名称：{$exchange.product_name}</p>
        <p class="product-price" style="text-decoration: line-through">原价：{$exchange.price}</p>
        <p class="product-price">使用期限：</p><p>{$exchange.start_time} 至 {$exchange.end_time}</p>
    </span>
    {if condition="!$exchange.is_exchanged"}
    <button data-exchange-id="{$exchange.id}" class="min-button exchange">立即兑换</button>
    {else/}
    <a href="javascript:0;" class="min-button exchanged ">已兑换</a>
    {/if}
</div>
{/volist}
<div class="msg">
    <div class="notice">
        <p>右上角分享给好友</p>
    </div>
    <div class="msg-box">
        <span class="msg-close">×</span>
        <p id="msg-text"></p>
        <div class="msg-content">
        </div>
    </div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="/static/js/common.js"></script>
<script>
    var exchanging = false;
    $(document).ready(function () {
        $('.exchange').click(function () {
            var exchange_id = $(this).data('exchange-id');
            if (exchanging) {
                return false
            }
            exchanging = true;
            $.ajax({
                url: '/user/productCode?exchange_id=' + exchange_id,
                type: 'get',
                success: function (data) {
                    //生成二维码
                    $('#msg-text').html(data.msg);
                    if (data.error_code == 0) {
                        //动态增加二维码节点，然后添加到消息界面中去
                        str = "<div class='qrcode-box'>" +
                            "<div id='qrcode'></div>" +
                            "</div>";
                        showDialog(data.msg ,str)
                        $('#qrcode').qrcode({width: 200, height: 200, text: data.data.url});
                        exchanging = false;
                    }
                }
            })
        })
    })

</script>